// Using old-school floats on purpose here because
// we can't easily know if sidebar is active in
// the current route in the parent elements in core
// and therefore can't use grid or flexbox
.tc-right-sidebar {
  display: none;
  margin-top: 67px;
}

// 自定义发帖按钮样式
#custom-create-topic {
  width: 100%;
  margin-bottom: 1em;
  border-radius: 1.5rem;
  background-color: #236de6;
  color: #fff;
  padding: 0.7rem 0;
}

@media screen and (min-width: 767px) {
  // Show the sidebar at 767px
  .tc-right-sidebar {
    display: block;
    width: 23.5%;
    box-sizing: border-box;
    float: right;

    // target adjacent core layout element
    + #list-area {
      width: calc(76.5% - 1.5em);
      float: left;
    }
  }
}

.rs-component {
  margin-bottom: 1.25em;
  h3 {
    border-bottom: 1px solid var(--primary-low);
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    font-size: 1.2em;
  }
}

//排行榜
.top-contributors-heading {
  border: none !important;
  span {
    float: right;
    font-size: 0.66666em;
    font-weight: 500;
    color: #262626;
    margin-top: 4px
  }
}
.rs-top-contributors {
  background: #F7F8F9;
  padding: 1.5em 1.5em 2.5em 1.5em;
}
.top-contributors--user-index {
  display: inline-block;
  width: 1.8666em;
  height: 1.8666em;
  line-height: 1.93333em;
  text-align: center;
  margin-right: 0.75em;
  // font-size: 0.75em;
  color: #262626;
  img {
    width: 100%;
    transform: translateY(-2px);
  }
}

// Top contributors
.top-contributors--user {
  margin-bottom: 0.3em;
  display: grid;
  grid-template-columns: auto 25%;
  grid-template-areas: "left right";
  grid-column-gap: 1em;
  cursor: pointer;
  padding-bottom: 0.5rem;
  // avatar增加margin-right
  .avatar {
    margin-right: 0.5em;
  }
}

.top-contributors--user-badge {
  grid-area: left;
  display: flex;
  align-items: center;
}
.top-contributors--user-badge-username {
  font-size: 0.9333em;
}

.top-contributors--user-likes {
  grid-area: right;
  justify-self: end;
  font-size: 0.8em;
  line-height: 28px;
}

// Recent replies
.recent-replies--reply {
  display: flex;
  &:not(:last-child) {
    padding-bottom: 1em;
    border-bottom: 1px solid var(--primary-low);
    margin-bottom: 1em;
  }
}

.recent-replies--col {
  &:first-child {
    padding-top: 0.05em;
  }
  &:nth-child(2) {
    margin: 0 0.5em;
    flex-shrink: 1;
    max-width: 80%;
    word-break: break-word;
  }
}

.recent-replies--date {
  font-size: var(--font-down-1);
  color: var(--primary-medium);
}

// Top topics + Tag topics

.rs-top-topics {
  //修改推荐帖子背景颜色，padding
  // background: #f2f2f2;
  background: #F7F8F9;
  padding: 1.5em 1.5em 2.5em 1.5em;
  h3 {
    border: none;
    font-size: var(--font-rs-h3)
  }
  .top-topics__topic {
    border: none;
    padding-bottom: 0;
    margin-bottom: .5rem;
    justify-content: flex-start;
  }
  // top-topics__topic前面加一个点
  .top-topics__topic:before {
    content: "•";
    margin-right: 0.5em;
  }
  //不换行、溢出显示省略号
  .top-topics__topic-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    a {
      color: #2c2c2c;
      font-size: var(--font-rs-title-2);
    }
    a:hover {
      color: var(--tertiary)
    }
  }
}

.tag-topics__topic,
.top-topics__topic {
  flex-wrap: wrap;
  justify-content: space-between;
  @extend .recent-replies--reply;
}

.tag-topics__date,
.top-topics__date {
  @extend .recent-replies--date;
}

.tag-topics__col,
.top-topics__col {
  &:first-child {
    margin-right: 0.5em;
    flex-shrink: 1;
    max-width: 80%;
    word-break: break-word;
  }
}

.tag-topics__category,
.top-topics__category {
  width: 100%;
  margin-top: 0.375em;
}

// category topics
.category-topics--content {
  padding: 0.5em 0;
}

.category-topics--topic {
  display: block;
  margin-bottom: 0.25em;
}

.category-topics--posts-count {
  color: var(--primary-high);
}

// Subcategory list

.subcategory-list--item {
  > .subcategory {
    display: flex;
    margin-bottom: 0.5em;
  }

  .badge-wrapper.bullet {
    margin-right: auto;
  }
}

// category list

.category-list__category {
  &:not(:last-child) {
    margin-bottom: 0.5em;
  }
}
